<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style type="text/css">
			*{padding: 0;margin: 0 ; list-style-type: none;}
			.box1{position: fixed;
			      top: 100px; right:100px; }
			.box1>li{width: 100px;
				     height: 100px;
				     background-color: #ccc;
			         text-align: center;
			         line-height: 100px;
			         position: relative;}



			.box1>li>ul{width: 400px;
				        position: absolute;
				        top: 0;right: 100px;
				        display: none;
				        }
		    .box1>li:hover ul{display: block;
		                      }


			.box1>li>ul>li{width: 100px;
				          float: right;
				         }
		    .box1>li>ul>li:hover{background-color: #ccc;}

			     	
		
			
		</style>

	</head>
	<body>
		<nav class="box1">
			<li>小学
				<ul >
					<li>语文</li>
					<li>数学</li>
					<li>外语</li>
					<li>政治</li>
				</ul>

			</li>
			<li>初中
				<ul>
					<li>语文</li>
					<li>数学</li>
					<li>外语</li>
					<li>政治</li>
				</ul>
			</li>
			<li>高中
				<ul>
					<li>语文</li>
					<li>数学</li>
					<li>外语</li>
					<li>政治</li>
				</ul>
			</li>
			<li>大学
				<ul>
					<li>语文</li>
					<li>数学</li>
					<li>外语</li>
					<li>政治</li>
				</ul>
			</li>
		</nav>
		
	</body>
</html>